<template>
  <el-container class="app-container">
    <!-- 侧边栏 -->
    <el-aside width="220px" class="sidebar-container">
      <div class="logo">
        <img src="@/assets/logo.png" alt="Logo" width="32" />
        <span>{{ appTitle }}</span>
      </div>
      
      <!-- 菜单 -->
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :unique-opened="true"
        background-color="#304156"
        text-color="#bfcbd9"
        active-text-color="#409EFF"
        router
      >
        <sidebar-item 
          v-for="route in routes" 
          :key="route.path" 
          :item="route" 
          :base-path="route.path" 
        />
      </el-menu>
    </el-aside>
    
    <!-- 主体内容 -->
    <el-container>
      <!-- 头部导航 -->
      <el-header height="60px" class="app-header">
        <!-- 折叠按钮 -->
        <div class="toggle-sidebar" @click="toggleSidebar">
          <i :class="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"></i>
        </div>
        
        <div class="header-right">
          <!-- 用户下拉菜单 -->
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="user-dropdown">
              <span class="user-name">{{ userName }}</span>
              <i class="el-icon-caret-bottom"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
              <el-dropdown-item command="settings">系统设置</el-dropdown-item>
              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </el-header>
      
      <!-- 内容区域 -->
      <el-main class="app-main">
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in breadcrumbs" :key="index">
            {{ item.title }}
          </el-breadcrumb-item>
        </el-breadcrumb>
        
        <!-- 路由视图 -->
        <transition name="fade-transform" mode="out-in">
          <router-view />
        </transition>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import SidebarItem from '@/components/SidebarItem'

export default {
  name: 'MainLayout',
  components: {
    SidebarItem
  },
  data() {
    return {
      appTitle: process.env.VUE_APP_TITLE || 'KJ-ERP'
    }
  },
  computed: {
    ...mapGetters({
      isCollapse: 'app/sidebarCollapsed',
      userName: 'auth/userName'
    }),
    activeMenu() {
      const { meta, path } = this.$route
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    routes() {
      // 过滤出需要显示在菜单中的路由
      return this.$router.options.routes.find(
        route => route.path === '/'
      ).children.filter(route => !route.meta.hidden)
    },
    breadcrumbs() {
      // 生成面包屑导航
      const breadcrumbs = []
      const matched = this.$route.matched.filter(
        item => item.meta && item.meta.title
      )

      matched.forEach(item => {
        breadcrumbs.push({
          path: item.path,
          title: item.meta.title
        })
      })

      return breadcrumbs
    }
  },
  methods: {
    ...mapActions({
      toggleSidebarAction: 'app/toggleSidebar',
      logout: 'auth/logout'
    }),
    toggleSidebar() {
      this.toggleSidebarAction()
    },
    handleCommand(command) {
      switch (command) {
        case 'profile':
          this.$router.push('/profile')
          break
        case 'settings':
          this.$router.push('/settings')
          break
        case 'logout':
          this.$confirm('确认退出登录?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.logout()
          }).catch(() => {})
          break
        default:
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: 100%;
}

.sidebar-container {
  transition: width 0.28s;
  background-color: #304156;
  height: 100%;
  position: fixed;
  z-index: 1001;
  overflow: hidden;
  
  .logo {
    height: 60px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    background-color: #2b3649;
    
    span {
      margin-left: 10px;
      color: #fff;
      font-size: 18px;
      font-weight: 600;
    }
  }
}

.app-header {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  
  .toggle-sidebar {
    cursor: pointer;
    font-size: 20px;
    
    &:hover {
      color: #409EFF;
    }
  }
  
  .header-right {
    display: flex;
    align-items: center;
    
    .user-dropdown {
      cursor: pointer;
      color: #333;
      
      .user-name {
        margin-right: 5px;
      }
    }
  }
}

.app-main {
  margin-left: 220px;
  padding: 20px;
  
  .breadcrumb {
    margin-bottom: 20px;
  }
}

// 侧边栏折叠时的样式调整
.app-container {
  .el-aside.sidebar-container {
    width: 64px !important;
    overflow: hidden;
    
    .logo {
      padding-left: 16px;
      
      span {
        display: none;
      }
    }
  }
  
  .app-main {
    margin-left: 64px;
  }
}

// 路由过渡动画
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter,
.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(20px);
}
</style> 